<template>
  <view
    class="my-form-box"
    :style="{ background: bgCloor, borderRadius: borderRadius + 'rpx' }"
  >
    <uni-forms
      ref="valiForm"
      validateTrigger="bind"
      :rules="form.rules"
      :model="data"
      label-width="175rpx"
    >
      <uni-forms-item
        v-for="(item, index) in form.item"
        :label="item.label"
        required
        :name="item.prop"
      >
        <uni-easyinput
          v-if="item.type === 'input'"
          v-model="data[item.prop]"
          :placeholder="
            item.placeholder ? item.placeholder : `请输入${item.label}`
          "
        />

        <uni-data-checkbox
          v-if="item.type === 'radio'"
          v-model="data[item.prop]"
          :localdata="item.radio?.list"
          :map="{ text: item.radio?.lable, value: item.radio?.value }"
        ></uni-data-checkbox>

        <myPicker
          v-if="item.type === 'cascader'"
          :data="data[item.prop]"
          @onchange="pickerChange($event, item.callback as any)"
          :http-request="item.httpRequest"
        ></myPicker>
      </uni-forms-item>
    </uni-forms>

    <view class="button-box">
      <!-- <button class="reset" @click="reset">{{ '重置' }}</button> -->
      <button class="submit" @click="submit">{{ '保存数据' }}</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, toRefs, reactive, onMounted, nextTick } from 'vue'
import type { MyFormConfigType, MyFormConfig } from '../type/FormType'

import myPicker from '../../../picker/src/my-picker.vue'

import { usePicker } from './hook/usePicker'

const emit = defineEmits([''])
const props = defineProps({
  bgCloor: {
    type: String,
    default: '#fff',
  },
  borderRadius: {
    type: Number,
    default: 20,
  },

  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
  formConfig: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const { data, formConfig } = toRefs(props)

const { pickerChange } = usePicker()

const valiForm = ref()

const form = reactive({
  config: {} as MyFormConfig<string>,
  item: [] as MyFormConfigType<string>[],

  rules: {},
})

onMounted(() => {
  initConfig()
})

const initConfig = () => {
  form.item = formConfig.value.item

  nextTick(() => {
    const rules = {}

    form.item.forEach((v) => {
      rules[v.prop] = {
        rules: v.rules,
      }
    })

    form.rules = rules
    console.log(form.rules, 'rules')

    uni
      .createSelectorQuery()
      .select('.u-radio')
      .boundingClientRect((res) => {
        console.log(res, 999999999999)
      })
      .exec()
  })
}

const submit = () => {
  valiForm.value
    .validate()
    .then((res: any) => {
      // 成功返回，res 为表单数据
      // 其他逻辑处理
      // ...
      console.log(res, 'success')
    })
    .catch((err: any) => {
      // 表单校验验失败，err 为具体错误信息
      // 其他逻辑处理
      // ...
      console.log(err, 'err')
    })
}
</script>

<style>
::v-deep .u-radio__text {
  margin-right: 20rpx !important;
}
</style>

<style lang="scss" scoped>
.my-form-box {
  width: 100%;
  box-sizing: border-box;
  padding: 50rpx;

  .button-box {
    width: 100%;
    display: flex;

    .submit {
      width: auto;
      height: 70rpx;
      color: #fff;
      background: linear-gradient(to right, #4f62ff, #4fd0ff);
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 70rpx;

      font-size: 0.85rem;
    }

    .reset {
      width: auto;
      height: 70rpx;
      color: #fff;
      background: linear-gradient(to right, #fb5c58, #4fd0ff);
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 70rpx;

      font-size: 0.85rem;
    }
  }
}
</style>
